<template>
   
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>运费模板</span>
      <el-button
        size="mini"
        class="btn-add"
        @click="handleAdd()"
        style="margin-left: 20px"
        >添加</el-button
      >
    </el-card>

    <div class="table-container">
         <el-table ref="resourceTable" :data="list" style="width: 100%;" v-loading="listLoading" border>
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="配送服务" align="center">
          <template slot-scope="scope">{{ scope.row.deliveryService | deliveryServiceName}}</template>
        </el-table-column>
        <el-table-column label="物流商名称" align="center">
          <template slot-scope="scope">{{ scope.row.providerName }}</template>
        </el-table-column>
        <el-table-column label="状态" width="160" align="center">
          <template slot-scope="scope">{{ scope.row.status | formatstatus  }}</template>
        </el-table-column>
          <el-table-column label="创建时间" width="160" align="center">
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
          <el-table-column label="创建用户" width="160" align="center">
          <template slot-scope="scope">{{ scope.row.createBy  }}</template>
        </el-table-column>
          <el-table-column label="更新时间" width="160" align="center">
          <template slot-scope="scope">{{ scope.row.updateTime}}</template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[5, 10, 15]"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="isEdit ? '编辑运费模板' : '添加运费模板'"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form :model="role" ref="roleForm" label-width="150px" size="small">
        <el-form-item label="配送模板名称：" >
          <el-input v-model="role.name" style="width: 250px" ></el-input>
        </el-form-item>
         <el-form-item label="配送服务：" >
          <el-select v-model="role.deliveryService" placeholder="全部" clearable style="width: 250px">
            <el-option v-for="item in peisongOptions"  :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="物流商：" >
          <el-select v-model="role.providerId" placeholder="全部" clearable style="width: 250px">
            <el-option v-for="item in wuliuOptions" :key="item.name" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启用状态">
          <el-select v-model="role.status" placeholder="全部" clearable style="width: 250px">
            <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
           <el-table
            ref="roleTable"
            :data="role.lmsTemplateItemList"
            style="width: 100%"
            v-loading="listLoading"
            border
          >
            <el-table-column label="配送国家" align="center">
              <template slot-scope="scope">{{scope.row.deliveryCountryNames}}</template>
            </el-table-column>
            <el-table-column label="运输时间" align="center">
              <template slot-scope="scope">{{ scope.row.transitStartDays }}-{{scope.row.transitEndDays}}</template>
            </el-table-column>
            <el-table-column label="是否偏远" align="center">
              <template slot-scope="scope">{{ scope.row.isRemote | isRemoteFilter}}</template>
            </el-table-column>
            <el-table-column label="每订单起始运费" align="center">
              <template slot-scope="scope">{{ scope.row.initialFreight }}</template>
            </el-table-column>
            <el-table-column label="每公斤运费" align="center">
              <template slot-scope="scope">{{ scope.row.kilogramFreight }}</template>
            </el-table-column>
            <el-table-column label="外包装体积重系数" align="center">
              <template slot-scope="scope">{{ scope.row.volumeWeightFactor }}</template>
            </el-table-column>
            <el-table-column label="附加费" align="center">
              <template slot-scope="scope">{{ scope.row.additionalCharge }}</template>
            </el-table-column>
            <el-table-column label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="text"
                       @click="handleDetailEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="mini"
                       type="text"
                       @click="handleDetailDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
          </el-table>
             <el-button
                size="mini"
                type="primary"
                @click.stop="handleAddDetail()"
              >
                增加
              </el-button>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm()" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>

     <el-dialog
      :visible.sync="detaildialogVisible"
      width="40%"
    >
      <el-form :model="detailRole" ref="roleForm" label-width="150px" size="small">
        <el-form-item label="配送国家：" >
          <!-- <el-input v-model="detailRole.deliveryCounties" style="width: 250px" ></el-input> -->
           <el-select v-model="detailRole.deliveryCountryList" @change="changedeliver" multiple placeholder="请选择">
          <el-option
            v-for="item in countryoptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>
         <el-form-item label="是否偏远：" >
         <el-select v-model="detailRole.isRemote" placeholder="全部" clearable style="width: 250px">
            <el-option v-for="item in pianyuanOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="运输天数：" >
          <el-input v-model="detailRole.transitStartDays" style="width: 250px" ></el-input>-<el-input v-model="detailRole.transitEndDays" style="width: 250px" ></el-input>
        </el-form-item>
         <el-form-item label="起始运费：" >
          <el-input v-model="detailRole.initialFreight" style="width: 250px" ></el-input>
        </el-form-item>
        <el-form-item label="公斤运费：" >
          <el-input v-model="detailRole.kilogramFreight" style="width: 250px" ></el-input>
        </el-form-item>
        <el-form-item label="体积重系数：" >
          <el-input v-model="detailRole.volumeWeightFactor" style="width: 250px" ></el-input>
        </el-form-item>
       <el-form-item label="附加费用：" >
          <el-input v-model="detailRole.additionalCharge" style="width: 250px" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detaildialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleDetailRole()" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  fetchList,
  getWuliuOption,
  createLogics,
  detailLogics,
  updateBox,
  // updateStatus,
  deleteRole,
  countryOption
} from "@/api/logistics";
import { formatDate } from "@/utils/date";

const defaultListQuery = {
  pageNum: 1,
  pageSize: 5,
  keyword: null,
};
const defaultRole = {
  id: null,
  name: null,
  description: null,
  adminCount: 0,
  status: null,
  lmsTemplateItemList:[]
};
export default {
  name: "roleList",
  data() {
    return {
      countryoptions:[],
       categoryOptions: [{
        label:'启用',
        value:1
      },{
       label:'停用',
        value:0
      }],
      pianyuanOptions:[{
        label:'是',
        value:1
      },{
       label:'否',
        value:0
      }],
      peisongOptions:[{
        label:'特惠配送',
        value:1
      },{
       label:'标准配送',
        value:2
      },{
       label:'加急配送',
        value:3
      }],
      wuliuOptions:[],
      detaildialogVisible:false,
      detailEidt:false,
      detailRole:{
        deliveryCountryList:[]
      },
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      dialogVisible: false,
      role: Object.assign({}, defaultRole),
      isEdit: false,
    };
  },
  created() {
    this.getList();
    this.getWuliu()
  },
  filters: {
    deliveryServiceName(value){
      if(value == 1){
            return '特惠配送'
        }else if(value==2){
            return '标准配送'
        }else{
          return '加急配送'
        }
    },
    formatstatus(value){
      if(value == 1){
            return '启用'
        }else{
            return '停用'
        }
    },
    isRemoteFilter(val){

      if(val == 0){
        return '否'
      }else{
        return '是'
      }
    }
  },
  methods: {
    changedeliver(e){
      let country = []
      if(e.length>0){
        e.forEach(element => {
          this.countryoptions.forEach(e =>{
            if(element == e.id){
              country.push(e.name)
            }
          })

        });
      }else{
        this.detailRole.deliveryCountryNames = ''
      }
      this.detailRole.deliveryCountries = e.join(',')
      this.detailRole.deliveryCountryNames = country.join(',')
    },
    handleAddDetail(){
       this.detailEidt = false;
      this.detaildialogVisible = true;
      this.detailRole = {}
    },
    handleDetailRole(){
      if(this.detailEidt){
this.role.lmsTemplateItemList[this.detailRole.indexF] = this.detailRole
      }else{
this.role.lmsTemplateItemList.push(this.detailRole)
      }

      this.detaildialogVisible = false
    },
    getWuliu(){
      countryOption().then(res =>{
        this.countryoptions = res.data
      })
      getWuliuOption().then(res =>{
        console.log(res,'3131');
        this.wuliuOptions = res.data
      })
    },
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleAdd() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.role = Object.assign({}, defaultRole);
    },
    handleStatusChange(index, row) {
      this.$confirm("是否要修改该状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateStatus(row.id, { status: row.status }).then((response) => {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改",
          });
          this.getList();
        });
    },
    handleDetailEdit(index,row){
       this.detailEidt = true;
       this.detaildialogVisible = true;
       this.detailRole = {};
       this.detailRole.indexF = index;
       this.detailRole = row
    },
    handleDetailDelete(index,row){
      this.role.lmsTemplateItemList.splice(index,1)
    },
    handleDelete(index, row) {
      this.$confirm("是否要删除该模板?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {

        deleteRole(row.id).then((response) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        });
      });
    },
    handleUpdate(index, row) {
      this.dialogVisible = true;
      this.isEdit = true;
      detailLogics(row.id).then(res=>{
 this.role = Object.assign({}, res.data);
      })

    },
    handleDialogConfirm() {
      this.$confirm("是否要确认?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.isEdit) {
          updateBox(this.role.id, this.role).then((response) => {
            this.$message({
              message: "修改成功！",
              type: "success",
            });
            this.dialogVisible = false;
            this.getList();
          });
        } else {
          createLogics(this.role).then((response) => {
            this.$message({
              message: "添加成功！",
              type: "success",
            });
            this.dialogVisible = false;
            this.getList();
          });
        }
      });
    },
    handleSelectMenu(index, row) {
      this.$router.push({ path: "/ums/allocMenu", query: { roleId: row.id } });
    },
    handleSelectResource(index, row) {
      this.$router.push({
        path: "/ums/allocResource",
        query: { roleId: row.id },
      });
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then((response) => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
  },
};
</script>
<style></style>


